<template>
  <div class="flex">
    <div style="width: 200px">
      <m-menu :data="data1" defaultActive="1" background-color="#fff"></m-menu>
    </div>
    <div style="width: 200px">
      <m-infinite-menu defaultActive="2" :data="data2"></m-infinite-menu>
    </div>
  </div>
</template>

<script lang="ts" setup>
let data1 = [
  {
    name: "导航1",
    index: "1",
    icon: "Document",
  },
  {
    name: "导航2",
    index: "2",
    icon: "Document",
  },
  {
    name: "导航3",
    index: "3",
    icon: "Document",
    children: [
      {
        name: "导航3-1",
        index: "3-1",
        icon: "Document",
      },
      {
        name: "导航3-2",
        index: "3-2",
        icon: "Document",
      },
    ],
  },
];
let data2 = [
  {
    name: "导航1",
    index: "1",
    icon: "Document",
  },
  {
    name: "导航2",
    index: "2",
    icon: "Document",
  },
  {
    name: "导航3",
    index: "3",
    icon: "Document",
    children: [
      {
        name: "导航3-1",
        index: "3-1",
        icon: "Document",
      },
      {
        name: "导航3-2",
        index: "3-2",
        icon: "Document",
        children: [
          {
            name: "导航3-2-1",
            index: "3-2-1",
            icon: "Document",
          },
        ],
      },
    ],
  },
];
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
}
</style>
